import { Directive, ElementRef, Input } from '@angular/core';
//Controls
import { AmChartsService } from "@amcharts/amcharts3-angular";

@Directive({ 
    selector: '[issueChart]'
})
export class IssueChartDirective {
    private chart: any; 
    private _chartID: string = '';  
    private _chartData: number = 0;
    private _chartLimit: number;   
    private _levelData: any = {
        limit: this._chartLimit,
        bullet: this._chartData
    };

    @Input() set chartID(value: string){
        if(value)
        {
            this._chartID = value;
        }
    }
    @Input() color: string;
    @Input() showAxis: boolean;    
    @Input() maxRating: number;
    @Input() showLimit: boolean;
    @Input() limitImage: string;
    @Input() set chartData(value: number) {  
        if(value)
        {       
            this._levelData.bullet = value;
            if(this.chart)         
            {                      
                this.AmCharts.updateChart(this.chart, () =>{
                    this.chart.dataProvider = [this._levelData];
                });
            }
        }              
        this._chartData = value;
    }
    @Input() set chartLimit(value: number) {  
        if(value)
        {
            this._levelData.limit = value;
            if(this.chart)         
            {                      
                this.AmCharts.updateChart(this.chart, () =>{
                    this.chart.dataProvider = [this._levelData];
                });
            }
        }
        this._chartLimit = value;
    }

    constructor(private el: ElementRef, private AmCharts: AmChartsService) { }
        
    ngOnInit() {
        let graphs: any[] = [{                
            columnWidth: 0.4,
            fillAlphas: 1,
            lineColor: this.color,                
            type: "column",
            valueField: "bullet",
            showBalloon: false,            
        }];
        
        if(this._chartLimit)
        {
            graphs.push({
                showBalloon: false,                
                stackable: false,
                bulletSize: 20,
                valueField: "limit",
                customBullet: this.limitImage
            });
        }

        //because its used in a ngFor, we must wait for the chart div to be rendered
        setTimeout(() => {
            this.chart = this.AmCharts.makeChart(this._chartID, {   
                type: "serial",
                autoMargins: false,
                marginTop: 20,
                marginLeft: 5,
                marginBottom: 10,
                marginRight: 7,            
                dataProvider: [this._levelData],
                valueAxes: [{
                    autoGridCount: false,
                    stackType: "regular",
                    gridAlpha: 0,
                    position: 'top', 
                    axisThickness: 0,              
                    fontSize: 8,
                    minimum: 0,
                    maximum: this.maxRating,
                    axisAlpha: this.showAxis ? 1 : 0,
                    labelsEnabled: this.showAxis,
                    labelFunction: function (valueText, serialDataItem, categoryAxis) {                    
                        return valueText;
                    }
                }],
                startDuration: 0, //animation disabled because of angular2-ie9-shims making it slow
                graphs: graphs,
                rotate: true,
                columnWidth: 2,
                categoryField: "category",
                categoryAxis: {
                    gridAlpha: 0,
                    axisAlpha: 0
                }
            });  
        });     
    }

    ngOnDestroy() {
        this.AmCharts.destroyChart(this.chart);
    }
}